<template>
	<!-- 预约时间 -->
	<u-popup :show="showPop" mode="bottom" @close="close">
		<view class="appointmentTime">
			<view class="date">
				<view class="top">
					<view class="title">预约时间</view>
					<view @tap="close">×</view>
				</view>
				<view class="main">
					<view class="label">
						<view class="item">周三</view>
						<view class="item">周四</view>
						<view class="item">周五</view>
						<view class="item">周六</view>
						<view class="item">周日</view>
						<view class="item">周一</view>
						<view class="item">周二</view>
					</view>
					<view class="content">
						<view class="item" v-for="(item,index) in 30" :key="index">
							<view class="day">{{item}}</view>
							<view class="text">可约</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="datetime">
				<view class="top">
					<view class="title">预约时间</view>
					<view @tap="close">×</view>
				</view>
				<view class="main">
					<view class="label">
						<view class="item active">
							上午
						</view>
						<view class="item">
							下午
						</view>
						<view class="item">
							晚上
						</view>
					</view>
					<view class="choose-title">
						选择时段
					</view>
					<view class="content">
						<view class="item" :class="{active:index===0}" v-for="(item,index) in 5">
							<view class="time">
								08:00-09:00
							</view>
							<view class="text">
								可约
							</view>
						</view>
					</view>
				</view>
				<view class="button">
					<view class="previous">上一步</view>
					<view class="submit">确定</view>
				</view>
			</view> -->
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "appointmentTime",
		props: {

		},
		data() {
			return {
				showPop: false,
				step: 1,
			};
		},
		methods: {
			open() {
				this.showPop = true
			},
			close() {
				this.showPop = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointmentTime {
		position: relative;

		.date {
			position: relative;
			height: 932rpx;
			padding: 32rpx 24rpx;
			background-color: #FFF;
			border-radius: 24rpx;
			overflow: hidden;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(54, 68, 79, 1);
				}
			}

			.main {
				margin-top: 48rpx;

				.label {
					display: flex;
					justify-content: space-between;
					background-color: $theme-color;

					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						width: calc(100% / 7);
						height: 88rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.content {
					display: flex;
					flex-wrap: wrap;

					.item {
						width: calc(100% / 7);
						height: 137.6rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.day {
							font-size: 32rpx;
							font-weight: 600;
							color: rgba(54, 68, 79, 1);
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.text {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(4, 184, 130, 1);
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}

					.item.available {
						background-color: rgba(237, 250, 250, 1);
					}
				}
			}
		}

		.datetime {
			position: relative;
			height: 728rpx;
			padding: 32rpx 24rpx;
			background-color: #FFF;
			border-radius: 24rpx;
			overflow: hidden;

			.top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					font-size: 32rpx;
					font-weight: 500;
					color: rgba(54, 68, 79, 1);
				}
			}

			.main {
				margin-top: 48rpx;

				.label {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item {
						width: calc(100% / 3.1);
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						border-radius: 8rpx;
						background-color: rgba(245, 245, 245, 1);
					}

					.item.active {
						color: rgba(255, 255, 255, 1);
						background-color: $theme-color;
					}
				}

				.choose-title {
					margin-top: 32rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.content {
					margin-top: 24rpx;
					display: flex;
					gap: 16rpx;
					flex-wrap: wrap;

					.item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						width: calc((100% - 32rpx) / 3);
						height: 124rpx;
						background-color: rgba(246, 248, 252, 1);
						// margin-top:16rpx;
						border-radius: 8rpx;

						.time {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(54, 68, 79, 1);
						}

						.text {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							font-weight: 400;
							color: rgba(54, 68, 79, 1);
						}
					}

					.item.active {
						background-color: rgba(225, 247, 241, 1);

						.time,
						.text {
							color: $theme-color;
						}
					}
				}
			}

			.button {
				margin-top: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				>view {
					width: calc(100% / 2.1);
					height: 80rpx;
					border-radius: 8rpx;
				}

				.previous {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgba(245, 245, 245, 1);
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}

				.submit {
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $theme-color;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
</style>